<template>
  <div class="tag-sys-dep">
    <el-card>
      <tag-content-header search add refresh setting spread fold @toolFun="toolFun" :settingData="columns">
        <template #title>
          <span class="title-text">部门列表</span>
        </template>
        <template #toolsPre v-if="$auth('front:handle:import:dept')">
          <el-tooltip effect="dark" content="批量导入" placement="top">
            <el-button type="primary" plain circle @click="importDepartment">
              <icon-svg name="iconImport"></icon-svg>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="下载模板" placement="top">
            <el-button type="primary" plain circle @click="downloadTemplate">
              <icon-svg name="iconDownload"></icon-svg>
            </el-button>
          </el-tooltip>
        </template>
      </tag-content-header>
      <tag-tree-table
        ref="treeTable"
        :data="dataList"
        :loading="loading"
        :columns="columns"
        :maxHeight="maxTableHeight"
      >
        <template #operation="{ scope }">
          <div class="operation-button-box">
            <el-tooltip effect="dark" content="添加下级部门" placement="top" :enterable="false">
              <i class="el-icon-circle-plus-outline" @click="handleEdit('add', scope.row)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
              <icon-svg name="iconEdit" class="svg-edit" @click.native="handleEdit('edit', scope.row)"></icon-svg>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
              <icon-svg name="iconDelete" class="svg-delete" @click.native="handleDelete(scope.row)"></icon-svg>
            </el-tooltip>
          </div>
        </template>
      </tag-tree-table>
    </el-card>
    <import-dialog ref="importDialog" @refresh="getList"></import-dialog>
    <department-drawer :treeList="treeList" ref="departmentDrawer" @refresh="getList"></department-drawer>
  </div>
</template>

<script>
import importDialog from './department-import-item'
import departmentDrawer from './department-edit-item'
import utils from '@/plugins/utils'
export default {
  components: {
    importDialog,
    departmentDrawer
  },
  data() {
    return {
      dataList: [],
      treeList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '部门名称',
          prop: 'deptNm',
          expand: true,
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '部门全称',
          prop: 'deptFname',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '部门类型',
          prop: 'deptType',
          dict: '$dept_type',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '所属公司',
          prop: 'compNm',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: false,
          label: '电子邮箱',
          prop: 'deptEmail',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: false,
          label: '联系地址',
          prop: 'contactAddr',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: false,
          label: '办公电话',
          prop: 'officePhone',
          align: 'center',
          search: true,
          searchKey: ''
        },
        {
          show: false,
          label: '负责人',
          prop: 'principalCnName',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: false,
          label: '状态',
          prop: 'deptStatus',
          width: '120',
          dict: 'status',
          search: true,
          searchKey: '',
          sort: true,
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 200
        }
      ]
    }
  },
  computed: {
    maxTableHeight() {
      var paddingHeight = 0
      if (this.$route.meta.isTab) {
        paddingHeight = 70
      } else {
        paddingHeight = 30
      }
      var height = this.$store.state.common.documentClientHeight - 80 - paddingHeight - 22 - 40
      return height
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('auth/authDeptMgr/all'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.treeList = utils.arrayToTree(data.data, {
            id: 'deptId',
            pid: 'parentDeptId',
            mainSort: 'treeLevel'
          })
          this.dataList = utils.treeToArray(this.treeList)
        } else {
          this.$message.error('获取部门列表失败！')
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['treeTable'].searchToggle()
          break
        case 'add':
          // 新增动作
          this.handleEdit()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
        case 'spread':
          // 展开动作
          this.$refs['treeTable'].spreadAll()
          break
        case 'fold':
          // 折叠动作
          this.$refs['treeTable'].foldAll()
          break
      }
    },
    handleEdit(type = 'add', scope = {}) {
      this.$refs.departmentDrawer.showDrawer(type, scope)
    },
    toggleStatus(scope) {
      let params = {
        compId: scope.row.compId,
        deptId: scope.row.deptId,
        parentDeptId: scope.row.parentDeptId,
        deptNm: scope.row.deptNm,
        deptFname: scope.row.deptFname,
        contactAddr: scope.row.contactAddr,
        deptEmail: scope.row.deptEmail,
        officePhone: scope.row.officePhone,
        principalCnName: scope.row.principalCnName,
        zipCode: scope.row.zipCode,
        deptStatus: scope.row.deptStatus,
        cmntStr: scope.row.cmntStr
      }
      this.$ajax({
        url: this.$ajax.setUrl('auth/authDeptMgr'),
        method: 'put',
        data: this.$ajax.setData(params)
      }).then(({ data }) => {
        let mes = { type: '', message: '' }
        if (data && data.code === '0') {
          mes.type = 'success'
          mes.message = '操作成功'
        } else {
          mes.type = 'error'
          mes.message = data.data || data.msg
        }
        this.getList()
        this.$message({
          message: mes.message,
          type: mes.type,
          duration: 2000
        })
      })
    },
    handleDelete(scope) {
      if (!scope.deptId) return
      this.$confirm('确认删除【' + scope.deptFname + '】？')
        .then(() => {
          let messageBox = document.getElementsByClassName('el-message-box__wrapper')
          messageBox[0].focus() // 防止按空格键重复确定
          this.$ajax({
            url: this.$ajax.setUrl('auth/authDeptMgr/' + scope.deptId),
            method: 'delete',
            params: this.$ajax.setParams()
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.getList()
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        })
        .catch(() => {
          return
        })
    },
    importDepartment() {
      this.$refs.importDialog.showDrawer()
    },
    downloadTemplate() {
      this.$ajax({
        url: this.$ajax.setUrl('stg/stgStdFile/import/tmpl'),
        method: 'get',
        params: this.$ajax.setParams({
          tmplId: 9
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data.fileId)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.tag-sys-dep {
  .tag-table .header-cell-class .cell {
    height: 40px;
  }
}
</style>
